import type { ProFormColumnsType } from '@ant-design/pro-form';
import { BetaSchemaForm } from '@ant-design/pro-form';
import { FormInstance, Input, Select, TreeSelect } from 'antd';
import { useForm } from 'antd/es/form/Form';
import { useEffect, useState } from 'react';
import './index.less';
interface Props {
  columns?: ProFormColumnsType<any>[];
  onSearch: (data: { [key: string]: string | number }) => void;
  /** @description 搜索框枚举 */
  labelSelect?: {
    [key: string]: string;
  };
  propsForm?: FormInstance;
}

/**
 * @param ProFormColumnsType
 * @description NOTE: hideInForm 可以控制显示隐藏
 * @returns JSX.Element | null
 */

export default function SearchForm(props: Props) {
  const { columns, onSearch, labelSelect, propsForm } = props;
  if (!columns || !Array.isArray(columns)) return null; // 防止异常数据
  const [form] = useForm();

  const inputWrap: any = {
    key: 'string',
    dataIndex: 'string',
    renderFormItem: () => (
      <InputCompact labelSelect={labelSelect} onHandleSearch={onHandleSearch} />
    ),
  };

  const formateColumns = () => {
    return columns.map((item: any) => ({
      ...item,
      title: '',
      fieldProps: {
        placeholder: item.title || item.key || item.dataIndex,
        ...item.fieldProps,
      },
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      // renderFormItem: item.valueType === 'treeSelect' ? () => <TreeSelectItem treeData={item.treeData} /> : false
    }));
  };

  const onHandleSearch = () => {
    if (propsForm) propsForm.submit();
    form.submit();
  };

  return (
    <BetaSchemaForm
      form={propsForm || form}
      columns={
        formateColumns().concat([inputWrap]) as ProFormColumnsType<any>[]
      }
      layout="inline"
      submitter={false}
      onFinish={async (data) => {
        const tmp = {
          ...data,
          ...data.string,
        };
        delete tmp.string;

        // NOTE: 选择提交上报，这里会过滤特殊字符 undefined/null
        onSearch(tmp);
      }}
      // layoutType="Embed"
    />
  );
}

interface InputProps {
  value?: string;
  onChange?: (value: { [key: string]: string }) => void;
  labelSelect?: {
    [key: string]: string;
  };
  onHandleSearch: () => void;
}

// 搜索框
export function InputCompact(props: InputProps) {
  const { onChange, labelSelect, onHandleSearch } = props;

  const [inputVal, setInputVal] = useState('');
  const [keyVal, setkeyVal] = useState(
    labelSelect ? Object.keys(labelSelect)[0] : '',
  );

  const onHandleChange = (val: string) => {
    setkeyVal(val);
  };

  useEffect(() => {
    if (onChange)
      onChange({
        [keyVal]: inputVal,
      });
  }, [keyVal, inputVal]);

  const onSearch = (val: string) => {
    setInputVal(val);
    onHandleSearch();
  };

  return (
    <Input.Group compact>
      <Select
        onChange={onHandleChange}
        defaultValue={labelSelect && Object.keys(labelSelect)[0]}
      >
        {labelSelect
          ? Object.keys(labelSelect).map((item) => (
              <Select.Option value={item} key={item}>
                {labelSelect[item]}
              </Select.Option>
            ))
          : null}
      </Select>
      {/* <Radio.Group onChange={(e) => onHandleChange(e, 'key')} defaultValue={labelSelect && Object.keys(labelSelect)[0]}>
        {
          labelSelect ? Object.keys(labelSelect).map((item) => (
            <Radio.Button value={item} key={item}>{labelSelect[item]}</Radio.Button>
          )) : null
        }
      </Radio.Group> */}
      <Input.Search
        style={{ width: 'auto' }}
        placeholder="Enter"
        // value={inputVal}
        // onChange={(e) => onHandleChange(e.target.value, 'value')}
        onSearch={onSearch}
        allowClear
      />
    </Input.Group>
  );
}

interface TreeProps {
  value?: { [key: string]: string };
  onChange?: (value: { [key: string]: string }) => void;
  treeData?: any;
}
export function TreeSelectItem(props: TreeProps) {
  return <TreeSelect allowClear {...props} />;
}
